<template>
  <div class="icon-picker">
    <el-input
      :placeholder="placeholder"
      class="input-with-select"
      :value="value"
      clearable
      @input="update"
    >
      <template slot="prepend">
        <i v-show="iconType == 'el'" :class="[value, 'sub-el-icon']" />
        <i v-show="iconType == 'awesome'" :class="[value, 'awesome-icon']" />
        <svg-icon
          v-show="iconType == 'svg'"
          :icon-class="value"
          class-name="disabled"
        />
      </template>
      <el-button slot="append" icon="el-icon-search" @click="dialog" />
    </el-input>
    <el-dialog
      :visible.sync="showDialog"
      :title="$t('jspIconPicker.select_icon')"
      custom-class="icon-dialog"
      append-to-body
    >
      <div class="icons-container">
        <el-tabs type="border-card" value="icons" @tab-click="handleClick">
          <el-tab-pane label="Svg Icons" name="icons">
            <el-input
              v-model="searchIconValue"
              :placeholder="$t('common.pleaseEnterKeywords')"
              clearable
            />
            <div class="grid">
              <div v-for="item of svgIcons" :key="item">
                <div class="icon-item" @click="chooseIcon(item)">
                  <svg-icon :icon-class="item" class-name="disabled" />
                  <span>{{ item }}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="Element-UI Icons" name="element">
            <el-input
              v-model="searchIconValue"
              :placeholder="$t('common.pleaseEnterKeywords')"
              clearable
            />
            <div class="grid">
              <div v-for="item of elementIcons" :key="item">
                <div class="icon-item" @click="chooseIcon('el-icon-' + item)">
                  <i :class="'el-icon-' + item" />
                  <span>{{ item }}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="Fontawesome Icons" name="fontawesome">
            <el-input
              v-model="searchIconValue"
              :placeholder="$t('common.pleaseEnterKeywords')"
              clearable
            />
            <div class="loading-position" />
            <div class="grid">
              <div v-for="item of fontawesomeIcons" :key="item">
                <div
                  class="icon-item"
                  @click="chooseIcon('awesome-icon ' + item)"
                >
                  <i :class="item" />
                  <span>{{ item }}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import svgIcons from './svg-icons'
import elementIcons from './element-icons'
import fontawesomeIcons from './fontawesome-icons'
import i18n from '@/lang'

export default {
  name: 'JspIconPicker',
  props: {
    value: {
      type: String,
      default: ' '
    },
    placeholder: {
      type: String,
      default: i18n.t('jspIconPicker.select_icon')
    }
  },
  data() {
    return {
      svgIcons,
      elementIcons,
      fontawesomeIcons: [],
      showDialog: false,
      searchIconValue: '',
      debounce_timer: null,
      debounce_timer_delay: 300,
      currentTabName: 'icons'
    }
  },
  computed: {
    iconType() {
      let type = ''
      if (this.value.includes('el-icon')) {
        type = 'el'
      } else if (this.value.includes('awesome-icon')) {
        type = 'awesome'
      } else {
        type = 'svg'
      }
      return type
    }
  },
  // 监听输入变化
  watch: {
    searchIconValue: {
      deep: true,
      handler(newVal, oldVal) {
        if (this.debounce_timer !== null) {
          clearTimeout(this.debounce_timer)
        }
        this.debounce_timer = setTimeout(() => {
          this.filterIcon(newVal)
        }, this.debounce_timer_delay)
      }
    }
  },
  mounted() {},
  methods: {
    // 弹出图标选择界面
    dialog() {
      this.showDialog = true
    },
    // 切换面板
    handleClick(tab, event) {
      this.searchIconValue = ''
      this.currentTabName = tab.name
      // if (tab.name === 'icons') {
      // } else if (tab.name === 'element') {
      // } else {
      if (tab.name === 'fontawesome' && this.fontawesomeIcons.length === 0) {
        const loading = this.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          // background: 'rgba(0, 0, 0, 0.7)',
          target: '#pane-fontawesome .loading-position'
        })
        var page = 1
        const pageSize = 2000
        const totalPage = Math.ceil(fontawesomeIcons.length / pageSize)
        var timerId = setInterval(() => {
          const getPageIcons = fontawesomeIcons.slice(
            pageSize * (page - 1),
            pageSize * page
          )
          if (page === totalPage) {
            clearTimeout(timerId)
            loading.close()
          } else {
            page++
          }
          this.fontawesomeIcons = this.fontawesomeIcons.concat(getPageIcons)
        }, 100)
      }
      // }
    },
    // 输入检索
    filterIcon(value) {
      switch (this.currentTabName) {
        case 'element':
          this.elementIcons = elementIcons.filter((v) => v.includes(value))
          break
        case 'fontawesome':
          this.fontawesomeIcons = fontawesomeIcons.filter((v) =>
            v.includes(value)
          )
          break
        default:
          this.svgIcons = svgIcons.filter((v) => v.includes(value))
      }
    },
    // 选择图标
    chooseIcon(icon) {
      // 关闭图标弹框
      this.showDialog = false
      this.$emit('input', icon)
    },
    update(val) {
      this.$emit('input', val)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .icon-dialog {
  width: 60%;
  .el-dialog__header {
    // flex: 1;
  }
  .el-dialog__body {
    overflow: hidden;
    .icons-container {
      margin: 10px 20px 0;
      .grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        min-height: 150px;
      }

      .icon-item {
        margin: 20px;
        height: 85px;
        text-align: center;
        width: 100px;
        float: left;
        font-size: 30px;
        color: #24292e;
        cursor: pointer;
        span {
          display: block;
          font-size: 16px;
          margin-top: 10px;
        }
      }

      .disabled {
        pointer-events: none;
      }
      .el-tabs__content {
        height: 33rem;
        overflow-y: scroll;
        overflow-x: hidden;
      }
    }
  }
}
</style>

